<template>
    <div class="zt-dialog-solt-3" style="width: 630px;height: calc(100% - 60px);padding-top: 0px;">
        <div class="file-page">
            <div class="pdf-page" v-for="item in listFile">
                <span class="item-num" @click="remove(item.documentId)" v-if="ifEdit"></span>
                <img class="pdf-img" src="@/assets/images/pdfImg.png" @click="showFileClick(item)" />
                <div>{{ item.fileName }}</div>
                <div>{{ item.createTime }}</div>
            </div>
        </div>
        <div class="flex" style="margin-bottom: 20px;">
            <div style="flex: 1;line-height: 40px;">
                <span v-if="ifEdit" class="offEdit" style="color: #D95348;" @click="ifEdit = false">完成编辑</span>
                <span v-else class="edit" style="color: #EDEDED;" @click="ifEdit = true">编辑</span>
            </div>

            <el-upload class="upload-demo"
                :action="headerIp+'/business/maintenance/document/' + previewObj.regionalNodeId" multiple :limit="1"
                accept=".pdf,image/*" :show-file-list="false" :headers="headers" :on-success="init">
                <el-button type="warning" round>添加资料(限PDF)</el-button>
            </el-upload>
        </div>
        <el-dialog class="dil" title="提示" :visible="showFile" :before-close="handleClose" :modal-append-to-body="false"
            width="80%" center :modal="false">
            <div>
                <el-button type="primary" round style="position: absolute;right: 90px;top: 10px;z-index: 999;"
                    icon="el-icon-download" @click="downloadFile">下载</el-button>
                <i class="el-icon-error" @click="showFile = false"
                    style="font-size: 40px;position: absolute;right: 10px;top: 10px;z-index: 999;color: #EDEDED;"></i>
                <div style="overflow: auto; height: calc(100vh - 100px);position: relative;">
                    <vue-office-pdf :src="fileUrl" v-if="docType && docType.indexOf('pdf')>=0"/>
                    <img :src="fileUrl" alt="" v-if="docType && docType.indexOf('image')>=0" style="position: absolute; height: 80%; width: 80%;top: 10%;left: 10%;">
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import Api from "@/api/business/fault";
import VueOfficePdf from '@vue-office/pdf'
export default {
    name: 'previewPage',
    emits: ['close'],
    components: { VueOfficePdf },
    props: {
        previewObj: {}
    },
    computed: {
        headerIp() {
            return process.env.VUE_APP_BASE_API
        }
    },
    created() {
        this.headers = {
            Authorization: 'Bearer ' + getToken()
        }
        if (this.previewObj) {
            this.init();
        }
    },
    data() {
        return {
            // 维护资料
            listFile: [],
            // 是否预览文件
            showFile: false,
            // 是否可以编辑
            ifEdit: false,
            // 预览的文件地址
            fileUrl: null,
            // 预览的文件类型
            docType: null,
            headers: {}
        }
    },
    methods: {
        // 下载PDF
        downloadFile() {
            window.open(this.fileUrl)
        },
        // 初始化查询台站资料数据
        init() {
            Api.getFaultFile({
                ownerId: this.previewObj.regionalNodeId
            }).then(rs => {
                this.listFile = rs.data;
            })
        },
        // 删除资料
        remove(id) {
            this.$modal.confirm('确认删除维护文档？').then(() => {
                Api.deleteFaultFile(id).then(() => {
                    this.$message.success('删除成功');
                    this.init();
                })
            }).catch(() => { });
        },
        // 显示文档
        showFileClick(item) {
            const {docUrl,docType} = item
            this.fileUrl = docUrl.replace('https://blos-a7-public.obs.cn-southwest-2.myhuaweicloud.com', '/showFile').replace(' ', '%20');
            this.docType = docType;
            this.showFile = true;
        },
        // 关闭文档弹窗
        handleClose() {
            this.fileUrl = null;
            this.showFile = false;
        },
        // 保存
        submitForm() {
        },
    }
}
</script>

<style lang="scss" scoped>
.file-page {
    height: calc(100vh - 120px);
}

.bottom {
    display: flex;
    background-color: #EDEDED;
}

.pdf-page {
    width: 120px;
    height: 120px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    margin: 16px;
    float: left;
}

.pdf-page>* {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #EDEDED;
    font-style: normal;
    text-transform: none;
}

.pdf-img {
    width: 65px;
    height: 71px;
}

.offEdit,
.edit {
    margin-left: 20px;
    position: relative;
}

.offEdit::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('../../../../assets/images/offEdit.png');
    background-repeat: no-repeat;
    background-size: 20px 20px;
    right: -20px;
    top: 0px;
}

.edit::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('../../../../assets/images/onEdit.png');
    background-repeat: no-repeat;
    background-size: 20px 20px;
    right: -20px;
    top: 0px;
}

.item-num {
    width: 20px;
    height: 20px;
    background-image: url('../../../../../public/image/xxx.png');
    background-repeat: no-repeat;
    background-size: 17px 17px;
    padding-left: 20px;
    display: inline-flex;
    margin-left: 20px;
    position: absolute;
    right: 0px;
    top: 0px;
}

.dil ::v-deep.el-dialog__body {
    position: static;
}
</style>